<!-- $Id: topic_edit.htm 16992 2010-01-19 08:45:49Z wangleisvn $ -->

{include file="pageheader.htm"}
{insert_scripts files="../js/utils.js,selectzone.js,colorselector_topic.js"}
<script type="text/javascript" src="../js/calendar.php?lang={$cfg_lang}"></script>
<link href="../js/calendar/calendar.css" rel="stylesheet" type="text/css" />
{if $warning}
<ul style="padding:0; margin: 0; list-style-type:none; color: #CC0000;">
  <li style="border: 1px solid #CC0000; background: #FFFFCC; padding: 10px; margin-bottom: 5px;" >{$warning}</li>
</ul>
{/if}
<!-- start goods form -->
<div class="tab-div">
  <!-- tab bar -->
  <div id="tabbar-div">
    <p> 
      <span class="tab-front" id="general-tab">基本信息</span> 
      <span class="tab-back" id="goods-tab">活动地点</span> 
      <span class="tab-back" id="desc-tab">活动详情</span>
    </p>
  </div>
  <!-- tab body -->
  <div id="tabbody-div">
    <form action="service_activity.php" method="post" name="theForm" enctype="multipart/form-data">
      <table cellspacing="1"  id="general-table" cellpadding="3" width="100%">
        <tr>
          <td class="label">活动名称</td>
          <td><input name="topic_name" type="text" value="{$topic.title}" size="40" /></td>
        </tr>

        <tr>
          <td class="label">活动简介</td>
          <td><textarea name="description" id="description" cols="40" rows="5">{$topic.description}</textarea></td>
        </tr>

        <tbody id="content_01">
          <tr>
            <td  class="label">
              <a href="javascript:showNotice('title_upload');" title="{$lang.form_notice}">
                <img src="images/notice.gif" width="16" height="16" border="0" alt="{$lang.form_notice}"></a>{$lang.lable_upload}</td>
            <td>
              <input type='file' name='topic_img' id='topic_img' size='35' />
              <br /><span class="notice-span" {if $help_open}style="display:block" {else} style="display:none" {/if} id="title_upload">{$width_height}</span></td>
          </tr>
          <tr>
            <td class="label">或者远程URL地址</td>
            <td><input type="text" name="url" id="url" value="" size="35" /></td>
          </tr>
        </tbody>

        <tr>
          <td class="label">{$lang.cycle}</td>
          <td><input name="start_time" type="text" id="start_time" size="12" value='{$topic.start_time}' readonly="readonly" />
            <input name="selbtn1" type="button" id="selbtn1" onclick="return showCalendar('start_time', '%Y-%m-%d', false, false, 'selbtn1');" value="{$lang.btn_select}" class="button"/>
            -
            <input name="end_time" type="text" id="end_time" size="12" value='{$topic.end_time}' readonly="readonly" />
            <input name="selbtn2" type="button" id="selbtn2" onclick="return showCalendar('end_time', '%Y-%m-%d', false, false, 'selbtn2');" value="{$lang.btn_select}" class="button"/></td>
        </tr>
      </table>
      <table width="90%" border="0"  align="center" cellpadding="0" cellspacing="0" id="goods-table" style="display:none;" >

        <tr>

          <td colspan="3"><img src="images/icon_search.gif" width="26" height="22" border="0" alt="SEARCH" />
            <select name="cat_id2">
              <option value="0">{$lang.all_category}</option>
              {$cat_list}
            </select>
            <input type="text" name="keyword2"/>
            <input name="button" type="button" class="button" onclick="searchAddress('cat_id2', 'keyword2')" value="{$lang.button_search}" />          
          </td>
        </tr>
        <!-- 商品列表 -->
        <tr height="37">
          <th>可选地点</th>
          <th>操作</th>
          <th>已选地点</th>
        </tr>
        <tr>
          <td width="42%"><select name="source_select" id="source_select" size="20" style="width:100%;height:300px;"  ondblclick="addItem(this)">
            </select>          </td>
          <td align="center"><p>
              <input name="button" type="button" class="button" onclick="addAllItem(document.getElementById('source_select'))" value="&gt;&gt;" />
            </p>
            <p>
              <input name="button" type="button" class="button" onclick="addItem(document.getElementById('source_select'))" value="&gt;" />
            </p>
            <p>
              <input name="button" type="button" class="button" onclick="removeItem(document.getElementById('target_select'))" value="&lt;" />
            </p>
            <p>
              <input name="button" type="button" class="button" value="&lt;&lt;" onclick="removeItem(document.getElementById('target_select'), true)" />
            </p></td>
          <td width="42%"><select name="target_select" id="target_select" size="20" style="width:100%;height:300px" multiple="multiple">
            </select>          </td>
        </tr>
      </table>
      <table width="90%" border="0"  align="center" cellpadding="0" cellspacing="0" id="desc-table" style="display:none;">
        <tr>
          <td>{$FCKeditor}</td>
        </tr>
      </table>
      <div class="button-div">
        <input  name="topic_data" type="hidden" id="topic_data" value='' />
        <input  name="act" type="hidden" id="act" value='{$act}' />
        <input  name="topic_id" type="hidden" id="topic_id" value='{$topic.topic_id}' />
        <input type="submit"  name="Submit"       value="{$lang.button_submit}" class="button" onclick="return checkForm()"/>
        <input type="reset"   name="Reset"        value="{$lang.button_reset}" class="button"/>
      </div>
    </form>
  </div>
</div>
{insert_scripts files="validator.js,tab.js"}
<script type="Text/Javascript" language="JavaScript">
  <!--
  var data = '{$topic.data}';

  {literal}
  var myTopic = new Array();

  onload = function()
  {
    myTopic    = data.parseJSON();
    showTargetList();
  }


  /**
   *  检验表单，并且赋JSON值给topic_data
   */
  function checkForm()
  {
    var validator = new Validator('theForm');
    validator.required('topic_name', topic_name_empty);
    validator.required('start_time', start_time_empty);
    validator.required('end_time', end_time_empty);
    validator.islt('start_time', 'end_time', start_lt_end);

    document.getElementById("topic_data").value = myTopic.toJSONString();
    return validator.passed();
  }



  function searchAddress(catId,keyword)
  {
    var elements = document.forms['theForm'].elements;
    var filters = new Object;
    filters.cat_id = elements[catId].value;
    filters.keyword = Utils.trim(elements[keyword].value);
    Ajax.call("service_activity.php?act=getAddressList", filters, function(result)
    {
      clearOptions("source_select");
      var obj = document.getElementById("source_select");
      for (var i=0; i < result.content.length; i++)
      {
        var opt   = document.createElement("OPTION");
        opt.value = result.content[i].value;
        opt.text  = result.content[i].text;
        opt.id    = result.content[i].data;
        obj.options.add(opt);
      }
    }, "GET", "JSON");
  }

  function clearOptions(id)
  {
    var obj = document.getElementById(id);
    while(obj.options.length>0)
    {
      obj.remove(0);
    }
  }

  function addAllItem(sender)
  {
    if(sender.options.length == 0) return false;
    for (var i = 0; i < sender.options.length; i++)
    {
      var opt = sender.options[i];
      addItem(null, opt.value, opt.text);
    }
  }

  function addItem(sender, value, text)
  {
    var target_select = document.getElementById("target_select");

    var newOpt   = document.createElement("OPTION");
    if (sender != null)
    {
      if(sender.options.length == 0) return false;
      var option = sender.options[sender.selectedIndex];
      newOpt.value = option.value;
      newOpt.text  = option.text;
    }
    else
    {
      newOpt.value = value;
      newOpt.text  = text;
    }
    if (targetItemExist(newOpt)) return false;
    if (target_select.length>=50)
    {
      alert(item_upper_limit);
    }
    target_select.options.add(newOpt); 

    myTopic.push(newOpt.text + "|" + newOpt.value);    
  }

  // 商品是否存在
  function targetItemExist(opt)
  {
    var options = document.getElementById("target_select").options;
    for ( var i = 0; i < options.length; i++)
    {
      if(options[i].text == opt.text && options[i].value == opt.value) 
      {
        return true;
      }
    }
    return false;
  }

  function showTargetList()
  {
    clearOptions("target_select");
  
    for ( var i = 0; i < myTopic.length; i++)
    {
      var newOpt    = document.createElement("OPTION");
      var arr = myTopic[i].split('|');
      newOpt.value  = arr[1];
      newOpt.text   = arr[0];
      document.getElementById("target_select").options.add(newOpt);
    }
  }

  function removeItem(sender,isAll)
  {
    
    if (!isAll)
    {
      var goodsName = sender.options[sender.selectedIndex].text;
      for (var j = 0; j < myTopic.length; j++)
      {
        if (myTopic[j].indexOf(goodsName) >= 0)
        {
          myTopic.splice(j,1);
        }
      }
      
      for (var i = 0; i < sender.options.length;)
      {
        if (sender.options[i].selected) {
          sender.remove(i);
          myTopic.splice(i, 0);
        }
        else
        {
          i++;
        }
      }
    }
    else
    {
      myTopic = new Array();
      sender.innerHTML = "";
    }
  }
  {/literal}
  //-->
</script>
{include file="pagefooter.htm"}
